<template>
  <el-dialog
    v-if="isOpen"
    title="回退调研"
    :visible.sync="isOpen"
    width="600px"
    append-to-body
  >
    <el-form
      ref="form"
      :model="formData"
      :rules="rules"
      label-width="120px"
    >
      <el-form-item
        label="回退部门"
        prop="back_department_ids"
        style="width: 100;"
      >
        <el-cascader
          v-model="formData.back_department_ids"
          style="width: 100%;"
          :options="detailData.department_research"
          :props="{multiple: true, value: 'department_id', label: 'department_name'}"
          collapse-tags
        >
          <template slot-scope="{ data }">
            <span>{{ data.department_name }}</span>
          </template>
        </el-cascader>

      </el-form-item>
      <el-form-item
        label="回退原因"
        prop="back_reason"
      >
        <el-input
          v-model="formData.back_reason"
          type="textarea"
          placeholder="请输入回退原因"
          :autosize="{ minRows: 3, maxRows: 9 }"
          :style="{ width: '100%' }"
        />
      </el-form-item>
    </el-form>
    <div
      slot="footer"
      class="dialog-footer"
    >
      <el-button @click="close">取 消</el-button>
      <el-button
        type="primary"
        @click="submitForm"
      >确 定</el-button>
    </div>
  </el-dialog>
</template>

<script>
import { returnLookInfo } from '@/api/projectInformation'
export default {
  data() {
    return {
      isOpen: false,
      detailData: null,
      formData: {
        id: '',
        back_department_ids: [],
        back_reason: ''
      },
      // 弹框
      rules: {
        back_department_ids: [
          { required: true, message: '请选择部门', trigger: 'change' }
        ],
        back_reason: [
          { required: true, message: '请填写回退原因', trigger: 'blur' }
        ]
      }
    }
  },
  // 生命周期 - 创建完成（访问当前this实例）
  created() {},
  methods: {
    // 表单重置
    reset() {
      this.formData = {
        id: '',
        back_department_ids: [],
        back_reason: ''
      }
      this.resetForm('form')
    },
    // 取消按钮
    close() {
      this.isOpen = false
      this.reset()
    },
    // 打开弹框
    open(data) {
      this.detailData = data
      this.isOpen = true
    },
    /** 提交按钮 */
    submitForm() {
      const that = this

      this.$refs['form'].validate((valid) => {
        var subdata = {
          id: this.detailData.id,
          back_department_ids: this.formData.back_department_ids.reduce(
            (a, b) => a.concat(b)
          ),
          back_reason: this.formData.back_reason
        }
        if (valid) {
          returnLookInfo(subdata).then((res) => {
            if (res.code === 200) {
              that.$emit('returnSuccess')
              that.isOpen = false
            }
          })
        }
      })
    }
  }
}
</script>
<style scoped>
/* @import url(); 引入css类 */
</style>
